<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>物资调拨</title>
    <link rel="stylesheet" href="css/public.css">
    <style>
    .transform button {
        width: 5.46rem;
        height: 0.86rem;
        margin: 0 auto;
        position: relative;
        background: #3D88DD;
        display: block;
        color: white;
        font-size: 0.3rem;
        border-radius: 0.2rem;
        box-shadow: 0px 2px 4px 1px #4994e7bd;
        border: none;
        margin-top: 0.58rem;
        margin-bottom: 0.8rem;
    }

    .transform h2 {
        width: 3rem;
        position: relative;
        top: 0.44rem;
        left: 0.7rem;
        font-size: 0.34rem;
        color: black;
        margin: 0;
    }

    .transform a {
        width: 100%;
        color: white;
        text-decoration: none;
        display: inline-block;
    }

    .search {
        background: #e4e1e1;
        border-radius: 0.5rem;
        width: 6.2rem;
        height: 0.45rem;
        border: none;
        padding-left: 0.2rem;
        margin: 0 auto;
    }

    .search_icon {
        position: absolute;
        bottom: 0.08rem;
        right: 0.54rem;
        background: #f3f0f0;
        border-radius: 50%;
        padding: 0.08rem;
        width: 0.4rem;
    }
    </style>
</head>

<body>
    <div class="transform">
        <h2>物资搜索</h2>
        <div style="position: relative;text-align: center;">
            <input class="search" id="search" type="text" name="wd" maxlength="100" placeholder="物资名称">
        </div>
        <div class="card_content" style="height:6.2rem;">
            <div class="card_tittle">
                <span style="margin-left:0.24rem;margin-right: 0.4rem">名称</span>
                <span style="margin-left:0;margin-right:0.7rem">规格型号</span>
                <span style="margin-right: 0.4rem">采购时间</span>
                <span style="margin-right: 0.4rem">数量</span>
                <span>调拨数量</span>
            </div>
            <hr>
            <ul class="transform-list">

            </ul>
        </div>
        <div class="dived"></div>
            <h2 style="top:0.2rem">使用时间</h2>
            <input style="position: relative;display: block;top:0.4rem;height: 0.64rem;border-radius:0.12rem;border:1px solid #c8cccf;width:4rem;margin: 0 auto 0.8rem;font-size: 0.3rem;" type="date"  class="use-time">
            <button class="commit-apply" style="outline: none;" >提交申请</button>
    </div>
    <script type="text/javascript" src="js/public.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript">
        // 给input  date设置默认值
        var now = new Date();
        //格式化日，如果小于9，前面补0
        var day = ("0" + now.getDate()).slice(-2);
        //格式化月，如果小于9，前面补0
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        //拼装完整日期格式
        var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
        //完成赋值
        $('.use-time').val(today);
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        var oAccessToken = getQueryString('access-token');


        // 获取列表
        get_List();
        function get_List(){
            $.ajax({
                url:"/v1/goods/allocate-list?access-token="+oAccessToken,
                type:'post',
                data:{
                    name:$('.search').val(),
                },
                async:true,
                success:function(data){
                    console.log(data.body)
                    var len = data.body.length;
                    if(data.status == 200){
                        var html='';
                        var num = '';
                        for(let i=0;i<len;i++){
                                num = (data.body[i].num)-(data.body[i].use_num);

                            html += '<li class="my_ml_list" aid='+data.body[i].id+' pid='+data.body[i].pid+'><span>'+data.body[i].name+'</span><span class="model"> <p>'+data.body[i].scale+'</p><p>'+data.body[i].type+'</p></span>'+
                                '<span style="margin-left: 0.28rem">'+data.body[i].buy_time+'</span><span class="my_product_num" style="margin-left: 0.68rem">'+num+'</span>'+
                                '<span class="add_reduce"> <span onclick="numDec(this)"><img style="width:0.2rem;margin: 0.1rem"  src="./images/reduce.png"></span>'+
                                '<input style="text-align: center;" type="text" class="quantity" value="0"  disabled/><span onclick="numAdd(this)"><img style="width:0.2rem;margin: 0.1rem;"  src="./images/add.png"></span></span>'+
                                '<hr style="width: 100%;"></li>';
                        }
                        $('.transform-list').html(html);
                    }else{
                        var html = '<h4 style="margin-left: 20px;">暂无物资</h4>';
                        $('.transform-list').html(html);

                    }
                },
                error:function(data){
                    if(data.status == 401){
                        window.location.href = './index.html';
                    }
                },
            });
        }
        // $('.search').keyup(function(){
        //     get_List();
        // })
        document.getElementById('search').addEventListener('input', function(e){
            get_List();
         });


        $('.commit-apply').click(function(){
            if(confirm('确定要提交么?')){
                var aList = $('.my_ml_list');
                var aNum  = $('.quantity');
                for(var i=0;i<aList.length;i++){
                    if( $(aNum[i]).val() != 0 ){
                        var Id   = $(aList[i]).attr('aid');
                        var Pid  = $(aList[i]).attr('pid');
                        var Num  = $(aNum[i]).val();
                    }
                }
                var useTime = $('.use-time').val();

                $.ajax({
                    url:'/v1/goods/allocate-apply?access-token='+oAccessToken,
                    type:'post',
                    data:{
                        id:Id,
                        num:Num,
                        pid:Pid,
                        use_time:useTime
                    },
                    success:function(data){
                        if(data.status == 200){
                            window.location.href = './Result_transform.html?access-token='+oAccessToken;
                        }else{
                            alert('请填写完整的数据信息');
                        }
                    },
                    error:function(data){
                        if(data.status == 401){
                            window.location.href = './index.html';
                        }
                    }
                })
            }

        });



        /*物资数量+1*/
        function numAdd(e) {
            var quantity = $(e).siblings('.quantity').val();
            var num_add = parseInt(quantity) + 1;
            if (quantity == "") {
                num_add = 1;
            }else if (quantity == $(e).parent().siblings(".my_product_num").text()) {
                var num_add = quantity;

            }
            $(e).siblings('.quantity').val(num_add);
            $(e).parents(".my_ml_list").siblings("li").find('.quantity').val(0);
        }

        /*物资数量-1*/
        function numDec(e) {
            var quantity = $(e).siblings('.quantity').val();
            var num_dec = parseInt(quantity) - 1;
            if (quantity == "" || quantity <= 0) {
                num_dec = 0;
            }
            $(e).siblings('.quantity').val(num_dec);

        }

    </script>
</body>

</html>